/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

.theme-light {
  --progress-playing-background: hsl(207, 100%, 97%);
  --progressbar-background: #ffffff;
  --replay-head-background: var(--purple-50);
}

.theme-dark {
  --progress-playing-background: #071a2b;
  --progressbar-background: #0c0c0d;
  --replay-head-background: var(--theme-highlight-purple);
}

body.scrubbing {
  user-select: none;
}

.frame-timeline-container {
  border-bottom: 1px solid var(--theme-splitter-color);
  background-color: #fff;
  padding: 12px 10px;
}

.frame-timeline-container:hover {
  cursor: pointer;
}

.frame-timeline-bar {
  background-color: var(--theme-splitter-color);
  width: 100%;
  height: 4px;
  position: relative;
  border-radius: 4px;
}

.frame-timeline-progress::after {
  content: " ";
  background-color: var(--replaying-marker-future-fill);
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 8px;
  position: absolute;
  right: -3px;
  top: -3px;
  display: none;
}
.frame-timeline-container:hover .frame-timeline-progress::after {
  display: block;
}

.scrubbing .frame-timeline-bar,
.scrubbing .frame-timeline-container,
.frame-timeline-marker:hover {
  cursor: grabbing;
}

.frame-timeline-progress {
  background-color: var(--replaying-marker-future-fill);
  position: absolute;
  width: 50%;
  height: 100%;
  display: inline-block;
  border-radius: 4px;
}
